<template>
  <div>
    <span @click="back()">×</span>
    <div class="login">
      <div class="photo"></div>
      <h6>早上好,*哈哈</h6>
    </div>
    <div class="pw">
        <span class="iconfont icon-xiaoxiangtubiao"></span>
        <input type="password" placeholder="请输入8-30位的登录密码" @keydown="col()"/>
        <a href="">忘记密码</a>
    </div>
    <button ref="login">登录</button>
    <p><a href="">更多登录方式</a>|<a href="">帮助</a></p>
  </div>
</template>

<script>
export default {
  methods: {
    back() {
      this.$router.go(-1);
    },
    col(){
     this.$refs.login.style.backgroundColor="red"
    }
  },
};
</script>

<style scoped>
span{
    display: block;
    font-size: 0.3rem;
    margin-left: 0.1rem;
}
.login {
    width: 2.9rem;
    height: 1.5rem;
    margin: auto;
}
.photo{
    width: 0.5rem;
    height: 0.5rem;
    background-color: wheat;
    border-radius: 50%;
    margin:0.15rem auto 0.2rem;
}
h6{
    font-size: 0.16rem;
    font-weight: 600;
    text-align: center;
}
.icon-xiaoxiangtubiao{
  display: block;
  font-size: 0.3rem;
  margin-right: 0.1rem;
  color: red;
}
input{
    display: block;
    width: 1.8rem;
    height: 0.25rem;
    /* margin: auto; */
    font-size: 0.16rem;
    border: none;
    outline: none;
}
.pw{
    width: 2.9rem;
    margin:0.2rem auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-bottom: 0.01rem solid gray;
}
a{
    font-size: 0.12rem;
    color: skyblue;
    margin: 0 0.05rem;
}
button{
    width: 2.9rem;
    height: 0.5rem;
    font-size: 0.2rem;
    /* background-color: #f44d5f; */

    border: none;
    border-radius: 0.05rem;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
p{
    font-size: 0.12rem;
    text-align: center;
    margin-top: 0.2rem;
}
</style>